<template>
  <div id="withdrawDeposit">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <!-- <div class="topImg">
      <img src="@/assets/img/new1/reac/top1.png" />-->
      <!-- type 1 vc  2 CNN -->
      <!-- <p>
          <label>{{$t('m.availableBalance')}}</label>&nbsp;
          <span v-if="type == 1">{{userObj.availableAmount}}&nbsp;vc</span>
          <span v-else>{{userObj.availablePoints}}&nbsp;CNN</span>
        </p>
      </div>-->
      <div class="main">
        <div class="balance">
          <!-- type 1vc option 1可提 2理财    type 2cnn -->
          <div v-if="type==1 && option ==1">
            {{$t('m.assets1')}}：
            <label>{{userObj.vcAmount}} VC</label>
          </div>
          <div v-if="type==1 && option ==2">
            {{$t('m.assets2')}}：
            <label>{{userObj.vcWithdrawAmount}} VC</label>
          </div>
          <div v-if="type==2 ">
            {{$t('m.assets1')}}：
            <label>{{userObj.cnnWithdrawAmount}} CNN</label>
          </div>
          <!-- <span @click="$router.push(`/recharge`)">{{$t('m.recharge')}}</span> -->
        </div>
        <div class="inputItem">
          <p v-if="type ==1">{{$t('m.withdrawalCurrency')}}：VC</p>
          <p v-if="type ==2">{{$t('m.withdrawalCurrency1')}}：CNN</p>
        </div>
        <div class="inputItem" v-if="type==1">
          <p v-if="type ==1">{{$t('m.coinAddress')}} ：</p>
          <p v-else>{{$t('m.coinAddress1')}} ：</p>
          <input v-if="type ==1" type="text" v-model="address" :placeholder="$t('m.coinAddressP')" />
          <input v-else type="text" v-model="address" :placeholder="$t('m.coinAddressP1')" />
        </div>
        <div class="inputItem">
          <p v-if="type ==1">{{$t('m.withdrawalAmount')}}：</p>
          <p v-else>{{$t('m.withdrawalAmount1')}}：</p>
          <input
            v-if="type ==1"
            type="text"
            v-model="num"
            @keyup="keyUp"
            :placeholder="$t('m.coinsNumberP')"
          />
          <input
            v-else
            type="text"
            v-model="num"
            @keyup="keyUp"
            :placeholder="$t('m.coinsNumberP1')"
          />
        </div>
        <div class="inputItem">
          <p>{{$t('m.getQrcode')}}：</p>
          <div style="position:relative;">
            <input type="text" v-model="msmCode" :placeholder="$t('m.codeP1')" />
            <span class="input_msm_btn" @click="getMsm">{{val}}</span>
          </div>
        </div>
        <div class="inputItem">
          <p>{{$t('m.remarks')}}：</p>
          <input type="text" v-model="remark" :placeholder="$t('m.remarksP')" />
        </div>
        <div class="tips">
          <!--type 2 CNN -->
          <p v-if="type ==1">{{$t('m.withdrawalNotice')}}</p>
          <p v-else>{{$t('m.withdrawalNotice1')}}</p>
          <!-- 手续费 -->
          <p v-if="type ==2" class="colorf10 smallfont">{{$t('m.wdtips1')}}</p>
          <p v-if="type ==1" class="colorf10 smallfont">{{$t('m.wdtips1_1')}}</p>
          <!-- 每笔必须高于手续费 -->
          <p v-if="type ==1 " class="colorf10 smallfont">{{$t('m.wdtips2_1')}}</p>
          <p v-if="type ==2" class="colorf10 smallfont">{{$t('m.wdtips2')}}</p>
          <!-- 理财资产 -->
          <p v-if="type ==1 && option ==2 " class="colorf10 smallfont">{{$t('m.wdtips4')}}</p>

          <p v-if="type ==2" class="colorf10 smallfont">{{$t('m.wdtips3')}}</p>
          <!-- <p v-if="type ==1" class="colorf10 smallfont">{{$t('m.tips3')}}</p>
          <p v-else class="colorf10 smallfont">{{$t('m.tips4_1')}}</p>
          <p v-if="type ==1" class="colorf10 smallfont">{{$t('m.tips4')}}</p>-->
          <!-- <p v-else class="colorf10 smallfont">{{$t('m.tips11_2')}}</p> -->
          <!-- <p v-if="type ==2" class="colorf10 smallfont">{{$t('m.tips11_4')}}</p>
          <p v-else class="colorf10 smallfont">{{$t('m.tips4_2')}}</p>-->
          <!-- <p>提币限额：每日最高提币数量100000000000vc</p> -->
        </div>
        <div v-if="type ==1" class="loginBtn" @click="submit">{{$t('m.withdrawalNow')}}</div>
        <div v-else class="loginBtn" @click="submit">{{$t('m.withdrawalNow1')}}</div>
      </div>
      <RootLoading v-show="rootLoading"></RootLoading>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Toast } from "vant";
import RootLoading from "@/components/rootLoading";
export default {
  data() {
    return {
      loginToken: "",
      address: "",
      num: "",
      remark: "",
      userObj: {},
      rootLoading: false,
      type: 1,
      option: 1,
      val: "",
      flag: true,
      time: 60,
      msmCode: ""
    };
  },
  created() {
    this.val = this.$t("m.getQrcode");
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.type = this.$route.query.type;
    if (this.type == 1) {
      this.option = this.$route.query.option;
      this.changeTitle(this.$t("m.withdrawal"));
    } else {
      this.changeTitle(this.$t("m.withdraw"));
    }

    this.getuser();
  },
  components: { Header, RootLoading },
  computed: {
    //  ...mapState({})
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    //			gomineItem(id){
    //				if(id == 1){
    //					this.$router.push(`/certification`);
    //				}else if(id == 2){
    //					this.$router.push(`/afterPsw`);
    //				}
    //			},
    keyUp() {
      this.num = this.num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      this.num = this.num.replace(/^\./g, ""); //验证第一个字符是数字而不是.
      this.num = this.num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      this.num = this.num
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.num = this.num.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
    },
    getMsm() {
      if (this.flag) {
        Services.getWithdrawCode({
          token: this.loginToken,
          lang: localStorage.getItem("language")
        }).then(res => {
          if (res.code == "0000") {
            this.val = this.time + "s";
            const timer = setInterval(() => {
              if (this.time > 1) {
                this.time--;
                this.val = this.time + "s";
              } else {
                this.time = 60;
                this.val = this.$t("m.getQrcode");
                clearInterval(timer);
                this.flag = true;
              }
            }, 1000);
            this.flag = false;
          } else {
            this.flag = true;
            Toast(res.msg);
          }
        });
      }
    },
    //提交
    submit() {
      // type 1 vc 2 CNN
      if (this.type == 1) {
        //vc
        if (!this.address) {
          Toast(this.$t("m.coinAddressP"));
          return;
        }
        if (this.address == this.userObj.walletAddress) {
          Toast(this.$t("m.tips5"));
          return;
        }
        if (!this.num || this.num == 0) {
          Toast(this.$t("m.coinsNumberP"));
          return;
        }
        if (this.option == 1) {
          // 可提资产
          if (this.num < 3) {
            Toast(this.$t("m.tips3_2"));
            return;
          }
          if (this.num > this.userObj.vcAmount) {
            Toast(this.$t("m.tips12"));
            return;
          }
        } else {
          // 理财资产
          if (this.num < 1000) {
            Toast(this.$t("m.wdtips4"));
            return;
          }
          if (this.num > this.userObj.vcWithdrawAmount) {
            Toast(this.$t("m.tips12"));
            return;
          }
        }
        if (this.msmCode == "") {
          Toast(this.$t("m.codeP1"));
          return;
        }
      } else {
        // cnn
        if (!this.num || this.num == 0) {
          Toast(this.$t("m.coinsNumberP"));
          return;
        }
        if (this.num < 20) {
          Toast(this.$t("m.tips3_2"));
          return;
        }
        if (this.num > this.userObj.cnnWithdrawAmount) {
          Toast(this.$t("m.tips12"));
          return;
        }
        if (this.msmCode == "") {
          Toast(this.$t("m.codeP1"));
          return;
        }
      }
      // deling 00
      // if (!this.address && this.type == 1) {
      //   // 地址
      //   if (this.type == 1) {
      //     Toast(this.$t("m.coinAddressP"));
      //   } else {
      //     Toast(this.$t("m.coinAddressP1"));
      //   }
      //   return;
      // } else if (!this.num) {
      //   console.log(this.num);
      //   // 数量
      //   if (this.type == 1) {
      //     Toast(this.$t("m.coinsNumberP"));
      //   } else {
      //     Toast(this.$t("m.coinsNumberP1"));
      //   }
      //   return;
      // } else if (
      //   (this.type == 1 &&
      //     this.option == 1 &&
      //     this.num > this.userObj.vcAmount) ||
      //   (this.type == 1 &&
      //     this.option == 2 &&
      //     this.num > this.userObj.vcWithdrawAmount)
      // ) {
      //   // 金额是否足够
      //   Toast(this.$t("m.tips12"));
      //   return;
      // } else if (this.type == 2 && this.num > this.userObj.cnnWithdrawAmount) {
      //   Toast(this.$t("m.tips12"));
      //   return;
      // } else if (this.type == 2 && this.num < 20) {
      //   Toast(this.$t("m.tips3_2"));
      //   return;
      // } else if (this.type == 1 && this.num < 3) {
      //   Toast(this.$t("m.tips3_2"));
      //   return;
      // } else if (this.type == 1 && this.option == 2 && this.num < 1000) {
      //   Toast(this.$t("m.wdtips4"));
      //   return;
      // } else if (this.address == this.userObj.walletAddress) {
      //   if (this.type == 1) {
      //     Toast(this.$t("m.tips5"));
      //   } else {
      //     Toast(this.$t("m.tips5_1"));
      //   }
      //   return;
      // }
      // else if (this.msmCode == "") {
      //   Toast(this.$t("m.codeP1"));
      //   return;
      // }
      this.rootLoading = true;
      let amountType = 1;
      if (this.type == 1) {
        if (this.option == 1) {
          amountType = 2;
        } else {
          amountType = 3;
        }
      } else {
        amountType = 1;
      }
      Services.withdraw({
        amountType: amountType,
        amount: this.num,
        walletAddress: this.address,
        remark: this.remark,
        token: this.loginToken,
        code: this.msmCode,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.rootLoading = false;
          Toast(this.$t("m.waiting"));
          this.$router.go(-1);
        } else {
          this.rootLoading = false;
          Toast(res.msg);
        }
      });
    },
    getuser() {
      Services.getUser({
        token: this.loginToken,
        lang: localStorage.getItem("language")
      }).then(res => {
        if (res.code == "0000") {
          this.userObj = res.user;
          localStorage.setItem("userObj", JSON.stringify(this.userObj));
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#withdrawDeposit {
  height: 100%;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow: auto;
    .topImg {
      height: 5.2rem;
      padding: 0;
      position: relative;
      > p {
        position: absolute;
        bottom: 0.5rem;
        margin: 0;
      }
    }
  }

  .main {
    width: 100%;
    padding: 0.5rem;
    .balance {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.5rem;
      font-size: 0.28rem;
      label {
        font-size: 0.3rem;
        color: #fd6262;
      }
      span {
        color: #e4b577;
      }
    }

    .inputItem {
      position: relative;
      p {
        margin-bottom: 0.1rem;
        font-size: 0.28rem;
        height: 0.7rem;
      }
      input {
        display: block;
        margin: 0 auto;
        margin-bottom: 0.3rem;
        padding: 0 0.2rem;
        border-radius: 0.1rem;
        border: none;
        height: 0.75rem;
        outline: none;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.26rem;
        background: linear-gradient(to right, #f8f8f8, #d3d3d5);
        color: #40404c;
        &::-webkit-input-placeholder {
          color: #999;
        }
      }
      // 获取验证码
      .input_msm_btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 2rem;
        height: 0.75rem;
        line-height: 0.75rem;
        color: #e4b577;
        text-align: center;
        border-top-right-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;
        border-left: 1px solid #cecece;
      }
    }
    .tips {
      font-size: 0.28rem;
      p:first-child {
        padding-bottom: 0.3rem;
        font-size: 0.28rem;
      }
      p:last-child {
        margin-bottom: 0.8rem;
      }
      .colorf10 {
        color: #888;
      }
      .color999 {
        color: #999;
      }
      .smallfont {
        font-size: 0.24rem;
      }
    }
    .loginBtn {
      margin: 0 auto;
      margin-top: 0.3rem;
      width: 4.16rem;
      height: 0.78rem;
      line-height: 0.78rem;
      font-size: 0.3rem;
      letter-spacing: 0.05rem;
      text-align: center;
      border-radius: 0.1rem;
      color: #fff;
      background: linear-gradient(to right, #43434e, #727181);
    }
  }
}
</style>